window.onload=function(){
    //获得元素  操作元素
    //获得标题元素
   var a =  document.querySelectorAll(".item");

    //获得要展示和隐藏的内容
   var b = document.querySelectorAll(".content");


   //为需要操作的对象绑定事件
   for (var i = 0; i < a.length; i++) {
    //直接绑定事件会造成循环事件的覆盖  我们采用调用一个函数的方式
     test(i);
   }



   //绑定事件的函数
   function test(index){
    //每调用一次为标题绑定单击事件 并且传入索引做参数
     a[index].onclick=function(){
        //如果对应的内容是隐藏的就显示 否则的话就隐藏
        if( b[index].style.display == "none"){
            //赋值
            b[index].style.display = "block";

            //当展开一块内容时  让其他内容都隐藏（展示一块菜单）

            //当点击了当前标题 将当前内容展示完毕后 需要将其他快的内容一并隐藏
            for(var i = 0; i < b.length;i++){
                //判断除了当前块其他的内容都隐藏
                //除了点击的块  满足1显示的才隐藏
                if(i!= index&&b[i].style.display == "block"){
                    b[i].style.display = "none";
                }

            }

        }else{
            b[index].style.display = "none";
        }
        
        
     };
   }

}